<style lang="scss" scoped>
	.wrapper {
		background-color: #F0F3F7;
		height: 100vh;
	}

	.date {
		&-wrapper {
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;

			>.icon {
				margin-right: 25rpx;
			}

			>.value {

				font-weight: 600;
				font-size: 28rpx;
				color: #409EFF;

			}

			>.text {
				margin: 0 20rpx;
				font-weight: 600;
				font-size: 28rpx;
				color: #98A5B3;
			}
		}
	}

	.title {
		&-wrapper {
			padding-left: 30rpx;
			font-weight: 600;
			font-size: 32rpx;
			color: #0F2E4D;
		}
	}

	.content {
		&-wrapper {
			width: 90%;
			margin: 0 auto;
			padding: 30rpx 0;
			background-color: #fff;
			box-shadow: 0 32rpx 20rpx -20rpx #E6EBF2;
			border-radius: 20rpx;


			.body {

				&-wrapper {
					margin-top: 60rpx;
					display: flex;
					flex-direction: row;


					&-left,
					&-right {
						flex: 1;
					}

					&-left {
						padding-left: 30rpx;
					}

					&-right {
						display: flex;
						flex-direction: column;
						// align-items: center;
						justify-content: space-between;
					}

				}


			}
		}
	}

	.bottom-wrapper {
		display: flex;
		flex-direction: row;
		justify-content: space-around;

		margin-top: 60rpx;

		.label {
			&-wrapper {
				text-align: center;

				.value {
					font-weight: 500;
					font-size: 36rpx;
					color: #0F2E4D;
				}

				.text {
					font-weight: 400;
					font-size: 28rpx;
					color: #98A5B3;
				}
			}
		}
	}

	.label {
		&-line {
			width: 4rpx;
			height: 20rpx;
			border-radius: 2rpx;
			display: inline-block;

			&__blue {
				background-color: #409EFF;
			}

			&__yellow {
				background-color: #EBB917;
			}

			&__green {
				background-color: #07C160;
			}
		}

		&-text {
			font-weight: 400;
			font-size: 28rpx;
			color: #98A5B3;
			margin-left: 14rpx;

		}

		&-value {
			font-weight: 600;
			font-size: 48rpx;
			color: #0F2E4D;
		}
	}
	.text-rate-size{
		font-size: 36rpx;
		color:#0F2E4D
	}
</style>

<template>
	<view class="wrapper">
		<u-calendar v-model="showCalendar" :mode="'range'" :z-index="999999" @change="changeCalendar"
			:max-year="maxYear"></u-calendar>
			
		<view class="date-wrapper">
			<span class="icon">
				<u-icon color="#98A5B3" name="calendar"></u-icon>

			</span>
			<span class="value" @click="showCalendar = true">
				{{dateTime.start }}
			</span>
			<span class="text">
				至
			</span>
			<span class="value" @click="showCalendar = true">
				{{dateTime.end }}
			</span>
		</view>
		<view class="content-wrapper">
			<view class="title-wrapper">
				<span>我的任务</span>
			</view>
			<view class="body-wrapper">
				<view class="body-wrapper-left">
					<span class="label-line label-line__blue"></span>
					<span class="label-text">
						完成率
					</span>
					<view class="label-content"> 
							<u-circle-progress active-color="#409EFF" :percent="data.completeRate" border-width="24">
								<view class="u-progress-content"> 
									<text class='u-progress-info text-rate-size'>
										{{data.completeRate}}%
									</text>
								</view>
							</u-circle-progress>
					</view>

				</view>
				<view class="body-wrapper-right">
					<view class="top">
						<span class="label-line label-line__yellow"></span>
						<span class="label-text">任务总数</span>
						<view class="label-value">
							{{data.taskNum}}
						</view>
					</view>
					<view class="bottom">
						<span class="label-line label-line__green"></span>
						<span class="label-text">已完成</span>
						<view class="label-value">
							{{data.completeTask}}
						</view>
					</view>
				</view>
			</view>
			<view class="bottom-wrapper">
				<view class="label-wrapper">
					<view class="value">
						{{data.completeInTime}}
					</view>
					<view class="text">
						按时完成
					</view>
				</view>
				<view class="label-wrapper">
					<view class="value">
						{{data.overtime}}
					</view>
					<view class="text">
						超时完成
					</view>
				</view>
				<view class="label-wrapper">
					<view class="value">
						{{data.unComplete}}
					</view>
					<view class="text">
						未完成
					</view>
				</view>
			</view>
			<view class="bottom-wrapper">
				<view class="label-wrapper">
					<view class="value">
						{{data.propose}}
					</view>
					<view class="text">
						提出总数
					</view>
				</view>
				<view class="label-wrapper">
					<view class="value">
						{{data.waitAudit}}
					</view>
					<view class="text">
						待审核
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script> 
	export default { 
		data() {
			return {

				showCalendar: false,
				dateTime: {
					start: '',
					end: ''
				},
				data: {
					completeInTime: 0,
					completeRate: 0,
					completeTask: 0,
					overtime: 0,
					propose: 0,
					taskNum: 0,
					unComplete: 0,
					waitAudit: 0,
				},
				maxYear: '',  

			}
		},

		 
		onShow() {
			this.initDefaultData() 
		},
		onLoad() { 
		},
		methods: {
			initDefaultData() {
				let date = new Date()
				let start = this.$u.timeFormat(date, 'yyyy-mm-dd')
				let end = this.$u.timeFormat(date, 'yyyy-mm-dd')
				this.maxYear = date.getFullYear()
				this.dateTime.start = start
				this.dateTime.end = end
				this.initData(start, end)
			},

			initData(startTime, endTime) {

				this.$pop.ajaxPost('/bus/taskInfo/getStatistics', {
					startTime: startTime || '',
					endTime: endTime || ''
				}).then(res => {
					console.log(res, 'res')
					if (res.code == 0) {
						let result = res.body
						this.data = result
					}
				})
			},
			changeCalendar(val) {
				this.dateTime.start = val.startDate
				this.dateTime.end = val.endDate
				this.initData(val.startDate, val.endDate)
			}

		}
	}
</script>
